<template>
  <div>
    <!--创建一个承载容器-->
    <div ref="echartsContainer" id="echartsContainer" style="height: 620px"></div>
  </div>
</template>


<script>
import echarts from 'echarts'
import { getCustomerArea } from '@/api/statistics/statistics'

export default {
  name: "customerStatisticsIndex",
  data(){
    return{

    }
  },
  mounted() {
    this.showCustomerArea()
  },
  methods: {
    showCustomerArea(){
      //发送请求到后端,查询客户区域的数据
      getCustomerArea().then(res => {
        let container = document.getElementById("echartsContainer");
        let myEcharts = echarts.init(container);
        var option;
        option = {
          title: {
            text: '客户地区统计',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: '人数',
              type: 'pie',
              radius: '50%',
              data: res.data,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
        myEcharts.setOption(option)
      })
    }
  }
}

</script>

<style scoped>

</style>
